<template>
	<view>
		<view class="head">
			<u-row>
				<u-col span="3">
					<view class="menu" :class="{menuactive:activemenu=='f1'}" @click="pagescroll('f1')">商品 </view>
				</u-col>
				<u-col span="3">
					<view class="menu " :class="{menuactive:activemenu=='f2'}" @click="pagescroll('f2')">评价</view>
				</u-col>
				<u-col span="3">
					<view class="menu" :class="{menuactive:activemenu=='f3'}" @click="pagescroll('f3')">推荐</view>
				</u-col>
				<u-col span="3">
					<view class="menu" :class="{menuactive:activemenu=='f4'}" @click="pagescroll('f4')">详情</view>
				</u-col>
			</u-row>
		</view>

		<view class="probanner" id="f1">
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item,index) in imgList">
						<view class="image-wrapper">
							<cimage :src="item.src" class="loaded" mode="aspectFill" imgtype="banner" :imgid="index"></cimage>
						</view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<view class="image-wrapper">
							<image :src="upimg" class="loaded" mode="aspectFill" imgtype="banner" @click="upbannerimg"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="proprice">
			<u-row>
				<u-col span="10">
					<text class="saleprice" @click="showpromodel">$400.00</text>
					<text class="markprice" @click="showpromodel">$600.00</text>
				</u-col>
				<u-col span="2">
					<image src="../../static/001.png" class="shareimg"></image>
				</u-col>
			</u-row>
		</view>
		<view class="title" @click="showpromodel">
			阿迪达斯官网 Pro Bounce 2019Low BATW男子场上篮球运动鞋EG1536
		</view>
		<view class="proinfo">
			<u-row>
				<u-col span="4">
					<view class="olprice">原价:$300.00</view>
				</u-col>
				<u-col span="4">
					<view class="store">库存:3000件</view>
				</u-col>
				<u-col span="4">
					<view class="sale">销量:3210件</view>
				</u-col>
			</u-row>
		</view>

		<view class="yh">
			<u-row>
				<u-col span="10">
					<view class="yhname" @click="showdiscount">优惠券:</view>
					<view class="yhcard" @click="showdiscount">满20减10</view>
					<view class="yhcard" @click="showdiscount">满20减10</view>
				</u-col>
				<u-col span="2">
					<image class="moreicon" src="../../static/002.png" @click="showdiscount"></image>
				</u-col>
			</u-row>
		</view>

		<view class="size">
			<u-row>
				<u-col span="10">
					<view class="sizetitle" @click="showpromodel">已选择:</view>
					<view class="sizesel" @click="showpromodel">默认</view>
				</u-col>
				<u-col span="2">
					<image class="moreicon" src="../../static/002.png" @click="showpromodel"></image>
				</u-col>
			</u-row>
		</view>
		<comment class="comment" id="f2"></comment>
		<recommend id="f3"></recommend>
		<view class="prodetail" id="f4">
			<u-row>
				<u-col span="6" offset="3">
					<view class="detailtile">产品介绍</view>
				</u-col>
				<u-col span="3">
					<view class="detailimgadd" @click="showupimgs=true">上传介绍图</view>
				</u-col>
			</u-row>
			<view class="detailimgs">
				<view v-for="(img ,index) in detailimgs">
					<cimage :src="img.src"  imgtype="detail" :imgid="index"></cimage>
				</view>
			</view>
		</view>
		<u-divider class="copyname">智慧商城</u-divider>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</view>
			<view open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-gouwuche"></text>
				<text>换品</text>
			</view>
			<view class="p-b-btn" :class="{active: favorite}">
				<text class="yticon icon-shoucang"></text>
				<text>保存</text>
			</view>

			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn">商品上架</button>
				<button type="primary" class=" action-btn no-border add-cart-btn">店铺上架</button>
			</view>
		</view>


		<u-popup v-model="showyh" :closeable="true" mode="bottom" border-radius="30">
			<view class="yhtitle">优惠券</view>
			<discount></discount>
		</u-popup>

		<u-popup v-model="showmodel" :closeable="true" mode="bottom" border-radius="30">
			<view class="sizebox">
				<u-row>
					<u-col span="3">
						<image :src="sizeimgurl" class="sizeproimg"></image>
					</u-col>
					<u-col span="9">
						<view class="u-line-1 sizetitle">阿迪达斯官网 Pro Bounce 2019Low BATW男子场上篮球运动鞋EG1536</view>
						<view>
							<view class="sizeprice">￥400.00</view>
							<view class="sizestore">库存: 1746</view>
						</view>
					</u-col>
				</u-row>
				<view>
					<view class="btnaddsize" @click="addnewssize">+添加规格+</view>
				</view>
			</view>
			<prosize v-for="i in prosize"></prosize>
			<view class="numbox">
				<u-row>
					<u-col span="4">
						<view class="sizeitemnum">库存</view>
					</u-col>
					<u-col span="1" offset="4">
						<image src="../../static/004.png" class="icon" @click="reducenum"></image>
					</u-col>
					<u-col span="2">
						<u-input v-model="store" :height="50" class="storenum"></u-input>
					</u-col>
					<u-col span="1">
						<image src="../../static/005.png" class="icon" @click="addnum"></image>
					</u-col>
				</u-row>
			</view>
			<view class="pricebox">
				<u-row>
					<u-col span="4">
						<view class="sizeitemnum">价格</view>
					</u-col>
					<u-col span="1" offset="4">
						<image src="../../static/004.png" class="icon" @click="reduceprice"></image>
					</u-col>
					<u-col span="2">
						<u-input type="number" v-model="price" :height="50" class="storenum"></u-input>
					</u-col>
					<u-col span="1">
						<image src="../../static/005.png" class="icon" @click="addprice"></image>
					</u-col>
				</u-row>
			</view>
		</u-popup>
		<u-popup v-model="showupimgs" :closeable="true" mode="bottom" border-radius="30">
			<view class="upimgstitle">上传介绍图片</view>
			<view class="upfiles">
				<u-upload ref="uUpload" :action="action" :auto-upload="true" :show-progress="false" :deletable="true" :max-count="9">
				</u-upload>
			</view>
		</u-popup>
		<u-popup v-model="showupbannerimgs" :closeable="true" mode="bottom" border-radius="30">
			<view class="upimgstitle">上传banner图片</view>
			<view class="upfiles">
				<u-upload ref="uUpload" :action="action" :auto-upload="true" :show-progress="false" :deletable="true" :max-count="9">
				</u-upload>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import comment from "../../components/comment.vue"
	import recommend from "../../components/recommend.vue"
	import discount from "../../components/discount.vue"
	import promodel from "../../components/promodel.vue"
	import prosize from "../../components/prosize.vue"
	import cimage from "../../components/cimage.vue"
	export default {
		data() {
			return {
				imgList: [{
						id: "1",
						src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
					},
					{
						id: "3",
						src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
					},
					{
						id: "6",
						src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
					}
				],
				detailimgs: [{
						id: "1",
						src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
					},
					{
						id: "3",
						src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
					},
					{
						id: "6",
						src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
					}
				],
				showyh: false,
				showmodel: false,
				sizeimgurl: "https://img.alicdn.com/imgextra/i2/446338500/O1CN01C1gPMf2Cf3B2m9MvK-446338500.jpg",
				store: 1,
				price: 1.00,
				prosize: 4,
				activemenu: "f1",
				floors: ['f1', 'f2', 'f3', 'f4'],
				action: '/api/storage',
				showupimgs: false,
				showupbannerimgs: false,
				upimg: "/static/006.png",
				favorite: true,
			}
		},
		components: {
			comment,
			recommend,
			discount,
			promodel,
			prosize,
			cimage
		},
		onLoad() {
			uni.$on('delimg', (res) => {
				if (res.imgtype == "banner") { //删除banner 图片
					let index = res.imgid
					this.imgList.splice(index, 1)
				}
				if (res.imgtype == "detail") {
					let index = res.imgid
					this.detailimgs.splice(index, 1)
				}
				console.log(JSON.stringify(res))
			})
		},
		mounted() {
			let timeId;
			window.addEventListener('scroll', () => {
				// 页面滚动停止100毫秒后才会执行下面的函数。
				clearTimeout(timeId);
				timeId = setTimeout(() => {
					this.scrollToTop();
				}, 100);
			}, true);
		},
		methods: {
			showdiscount() {
				this.showyh = true
			},
			showpromodel() {
				this.showmodel = true
			},
			reducenum() {
				if (this.store > 0) {
					this.store = this.store - 1;
				}

			},
			addnum() {
				this.store = this.store + 1;
			},
			reduceprice() {
				if (this.price > 0) {
					this.price = this.price - 1.00;
				}

			},
			addprice() {
				this.price = this.price + 1.00;
			},
			addnewssize() {
				this.prosize++;
			},
			pagescroll(id) {
				this.$el.querySelector(`#` + id).scrollIntoView({
					behavior: "smooth", // 平滑过渡 
				});
				this.activemenu = id
			},
			scrollToTop() {
				this.floors.map((fl) => {
					var domHight = document.body.offsetHeight;
					var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
					var offsetTop = document.getElementById(fl).offsetTop;
					var scrollHeight = document.getElementById(fl).scrollHeight;
					if (scrollTop >= offsetTop && scrollTop <= (offsetTop + scrollHeight)) {
						this.activemenu = fl;
					}
				})
			},
			uploadimg() {

			},
			upbannerimg() {
				this.showupbannerimgs = true;
				this.imgList.push({
					id: null,
					src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'

				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.head {
		padding: 20rpx 160rpx;
		text-align: center;
		background-color: #ffffff;
		font-size: 32rpx;
		position: fixed;
		top: 0rpx;
		width: 100%;
		z-index: 100;
	}

	.probanner {
		margin-top: 90rpx;
	}

	.menu {
		text-align: center;
		line-height: 50rpx;
	}

	.menuactive {
		border-bottom: 1rpx solid #ff0000;
		width: 80rpx;

	}

	.proprice {
		margin: 20rpx 10rpx;
	}

	.saleprice {
		color: #ff0000;
		font-size: 40rpx;
		font-weight: 800;
		padding-left: 20rpx;
	}

	.markprice {
		color: #000000;
		font-size: 24rpx;
		font-weight: 600;
		padding-left: 20rpx;
	}

	.shareimg {
		height: 40rpx;
		width: 40rpx;
		float: right;
		padding-right: 10rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 800;
		margin: 10rpx 20rpx;
		color: #333;
	}

	.proinfo {
		margin: 20rpx 20rpx;
		font-size: 20rpx;
		color: #999;
	}

	.store {
		text-align: center;
	}

	.sale {
		float: right;
	}

	.yh {
		margin: 20rpx 20rpx;
		color: #999;
		font-size: 22rpx;
	}

	.yhname {
		float: left;
		margin: 10rpx 0rpx;
	}

	.yhcard {
		border: 1rpx solid #ff0000;
		padding: 5rpx 20rpx;
		float: left;
		margin-left: 20rpx;
		margin-top: 10rpx;
		color: #ff0000;
		font-size: 22rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justion-content: center;
		position: relative;
	}

	.yhcard::before {
		content: "";
		background: #fff;
		width: 10rpx;
		height: 18rpx;
		border-radius: 0 100% 100% 0; //左上--右上--右下--左下
		display: block;
		border: 1px solid #ff0000;
		border-left: none;
		position: absolute;
		top: 50%;
		left: -1px;
		transform: translateY(-50%);
	}

	.yhcard::after {
		content: "";
		background: #fff;
		width: 10rpx;
		height: 18rpx;
		border-radius: 100% 0 0 100%; //左上--右上--右下--左下
		display: block;
		border: 1px solid #ff0000;
		border-right: none;
		position: absolute;
		top: 50%;
		right: -1px;
		transform: translateY(-50%);
	}

	.moreicon {
		margin: 10rpx 0rpx;
		width: 50rpx;
		height: 50rpx;
		float: right;
	}

	.size {
		margin: 20rpx 20rpx;
		color: #999;
		font-size: 22rpx;
	}

	.sizetitle {
		float: left;
	}

	.sizesel {
		color: #333;
		float: left;
		padding-left: 20rpx;
	}

	.comment {
		margin: 0rpx 20rpx;
	}

	.prodetail {
		margin-bottom: 100rpx;
		margin-top: 60rpx;
	}

	.detailtitlebox {
		position: relative;
	}

	.detailtile {
		text-align: center;

	}

	.detailimgs {
		clear: both;
	}

	.detailimg {
		width: 100%;
	}

	.yhtitle {
		position: relative;
		text-align: center;
		font-size: 38rpx;
		font-weight: 900rpx;
		color: #666;
		background-color: #f5f5f5;
		padding-top: 40rpx;
	}

	.sizebox {
		margin: 60rpx 20rpx 20rpx 20rpx;
	}

	.sizeproimg {
		height: 120rpx;
		width: 120rpx;
	}

	.sizetitle {
		margin-top: 0rpx;
		margin-bottom: 30rpx;
	}

	.sizeprice {
		float: left;
		font-size: 38rpx;
		color: #ff0000;
	}

	.icon {
		height: 40rpx;
		width: 40rpx;
	}

	.numbox {
		margin: 20rpx 20rpx;
	}

	.pricebox {
		margin: 20rpx 20rpx;
		margin-bottom: 60rpx;
	}

	.btnaddsize {
		float: right;
		background-color: #f2f2f2;
		padding: 10rpx 20rpx;


	}

	.detailimgadd {
		border: 1px solid #ff0000;
		font-size: 26rpx;
		color: #282828;
		padding: 10rpx 10rpx;
		background-color: #f2f2f2;
		text-align: center;
		margin: 10rpx 4rpx;
	}

	.upimgstitle {
		margin: 40rpx 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 800;
	}

	.upfiles {
		margin: 40rpx 20rpx;
	}

	.copyname {
		padding-bottom: 200rpx;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		bottom: 0rpx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #999999;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: #999999;
			}

			&.active,
			&.active .yticon {
				color: #999999;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: 32rpx;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	} 
</style>
